<template>
<div class="chat_model">
    <a-modal
        v-model:open="state.show"
        title="设定"
        width="650px"
        @ok="handleOk"
    >
        <el-form
            label-position="top"
            label-width="100px"
            :model="state.form"
        >
            <el-form-item label="角色设定">
                <el-input
                    v-model="state.form.prompt"
                    :rows="4"
                    maxlength="800"
                    show-word-limit
                    type="textarea"
                    placeholder="给你的会话设置一个专属的角色，更多请前往「角色应用」..."
                />
            </el-form-item>
            <div class="item-box">
                <div class="box">
                    <div class="title">模型</div>
                    <div class="content">
                        <el-select v-model="state.form.model" placeholder="请选择模型" style="width: 100%">
                            <el-option
                                v-for="item in state.model_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.model"
                            />
                        </el-select>
                    </div>
                </div>
            </div>
            <el-collapse v-model="state.collapse_name">
                <el-collapse-item name="option">
                    <template #title>
                        <div class="title-box">
                            <div class="title">高级</div>
                            <span>（不了解不需要修改）</span>
                        </div>
                    </template>
                    <div class="item-box">
                        <div class="box">
                            <div class="title">上下文数量</div>
                            <div class="content w-70">
                                <el-slider v-model="state.form.restriction" :min="1" :max="20" :step="1" show-input />
                            </div>
                        </div>
                        <span class="tip">更多的上下文会使记忆更精确，但会消耗更多的额度</span>
                    </div>
                    <div class="item-box">
                        <div class="box">
                            <div class="title">话题随机性</div>
                            <div class="content w-70">
                                <el-slider v-model="state.form.temperature" :min="0" :max="1.2" :step="0.1" show-input />
                            </div>
                        </div>
                        <span class="tip">较高的数值会使同问题每次输出的结果更随机</span>
                    </div>
                    <div class="item-box">
                        <div class="box">
                            <div class="title">回复数</div>
                            <div class="content w-70">
                                <el-slider v-model="state.form.max_reply_token" :min="1" :max="2048" :step="1" show-input />
                            </div>
                        </div>
                        <span class="tip">单条回复数，但也会消耗更多的额度</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <template #footer>
            <a-button key="back" @click="state.show = !state.show">取消</a-button>
            <a-button key="submit" type="primary" :loading="state.loading" @click="onSubmit">保存</a-button>
        </template>
    </a-modal>
</div>
</template>

<script setup lang="ts">
import { getGroupModel, saveGroup } from '/@/api/frontend/chat/ai/group'
import { reactive, watch } from 'vue'
import { ElNotification } from "element-plus";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    chantModel: {
        type: String,
        default: 'gpt-3.5-turbo',
    },
    groupId: {
        type: Number,
        default: 0,
    },
})

const state: {
    loading: boolean,
    show: boolean,
    collapse_name: string,
    model_list: any[],
    form: any,
} = reactive({
    loading: false,
    show: false,
    collapse_name: 'option',
    model_list: [],
    form: {
        group_id: props.groupId,
        prompt: '',
        model: props.chantModel? props.chantModel : 'gpt-3.5-turbo',
        restriction: 5,
        temperature: 0.8,
        max_reply_token: 2048,
    },
})

const handleOk = (e: MouseEvent) => {
    console.log(e)
    state.show = false
};

// 监听visible
watch(() => props.visible, (val) => {
    state.show = true
    if(state.show) {
        getGroupModel(props.groupId).then((res: any) => {
            state.form = res.data
            state.form.temperature = Number(res.data.temperature)
            state.model_list = res.data.model_list
        })
    }
})
watch(() => props.chantModel, (val) => {
    if(val) {
        state.form.model = val
    }
})
const onSubmit = () => {
    state.form.id = props.groupId
    saveGroup(state.form).then((res: any) => {
        if(res.code === 1) {
            state.show = false
            // 传给父级
            ElNotification({
                message: '保存成功',
                type: 'success',
            })
        }
    })
}
</script>

<style scoped lang="scss">
.chat_model {
    .chat-model {
        position: absolute;
        z-index: 998;
        font-size: 16px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -24px;
        cursor: pointer;
        background-color: var(--el-color-white);
        border-radius: 0 0 5px 5px;
        border: 1px solid var(--ct-border-color);
        .show {
            display: flex;
            align-items: center;
            padding: 4px 15px;
            height: 24px;
            margin: 0 auto;
            color: var(--text-color-grey);
            span {
                margin: 0 8px;
                white-space: nowrap;
            }
            &:hover {
                color: var(--text-color-primary);
            }
        }
    }
}
html {
    &.dark {
        .chat_model {
            //:deep(.el-dialog) {
                .el-collapse {
                    .el-collapse-item__header {
                        background-color: #666;
                    }
                }
            //}
        }
    }
}

//:deep(.el-form) {
    .item-box {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        font-size: 14px;
        .box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title {
                width: 100px;
            }
            .content {
                display: flex;
                align-items: center;
                width: 50%;
                &.w-70 {
                    width: 70%;
                }
            }
        }
        .tip {
            margin-top: 8px;
            font-size: 12px;
            color: #6d7c92;
        }
    }
    .el-collapse {
        .el-collapse-item__header {
            background-color: #fafbfc;
            padding: 0 10px;
            margin-bottom: 16px;
        }
        .title-box {
            display: flex;
            align-items: center;
            .title {
                font-size: 14px;
                margin-right: 8px;
            }
            span {
                font-size: 12px;
                color: #999;
            }
        }
    }
//}
</style>
